<template>
  <div class="grid gap-y-5">
    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">加工登记</span>
      </div>
      <el-form
        ref="form"
        :model="form.data"
        :rules="form.rule"
        size="medium"
        label-width="7rem"
      >
        <el-row>
          <el-col
            :span="24"
          >
            <el-form-item
              label="员工编号"
              prop="bid"
            >
              <el-input
                v-model="form.data.bid"
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item
              label="牲畜编号"
              prop="aid"
            >
              <el-input
                v-model="form.data.aid"
                :style="{ width: '100%' }"
              />
            </el-form-item>
            <el-form-item
              label="加工类型"
              prop="ptype"
            >
              <el-select
                v-model="form.data.ptype"
                placeholder="请选择"
                :style="{ width: '100%' }"
                :disabled="!form.data.aid"
              >
                <el-option
                  v-for="(val,key) in this.$store.state.gtype.ptype[form.data.atype]"
                  :key="form.data.atype+key"
                  :label="val"
                  :value="100*form.data.atype+key"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="重量"
              prop="weight"
            >
              <el-input
                v-model="form.data.weight"
                :style="{ width: '100%' }"
              >
                <template slot="append">
                  kg
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        class="ml-28"
        @click="submit"
      >
        添加
      </el-button>
    </el-card>

    <el-card
      class="collapse"
      :class="collapse.t1.opened ? 'opened' : 'closed'"
    >
      <div
        slot="header"
        @click="toggleColl('t1')"
      >
        <i class="el-icon-arrow-right font-bold" />
        <span class="ml-2 text-xl font-bold">加工列表</span>
      </div>
      <el-collapse-transition>
        <div
          v-show="collapse.t1.opened"
        >
          <el-table
            :data="table.data"
            stripe
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-col
                  :span="12"
                  class="mb-2"
                >
                  <div>
                    <a
                      :href="'/#/trace/'+props.row.hash"
                      target="_blank"
                      rel="noopener"
                    >
                      <img
                        :src="props.row.qr"
                        alt=""
                      ></a>
                  </div>
                </el-col>
              </template>
            </el-table-column>
            <el-table-column
              prop="bid"
              label="员工编号"
            />
            <el-table-column
              prop="aid"
              label="牲畜编号"
            />
            <el-table-column
              prop="pid"
              label="产品编号"
            />
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>

    <el-dialog
      :visible.sync="dialog"
      width="30%"
    >
      <div class="flex justify-evenly items-center">
        <div>{{ temp.msg }}</div>
        <div>
          <a
            :href="'/#/trace/' + temp.newHash"
            target="_blank"
            rel="noopener"
          >
            <img
              :src="temp.newQr"
              alt=""
            ></a>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="dialog = false"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Hashids from 'hashids'
import QRCode from 'qrcode'

export default {
  data () {
    return {
      hashids: new Hashids(),
      QRCode,
      dialog: false,
      collapse: {
        t1: {
          opened: false,
          state: 0
        }
      },
      form: {
        data: {
          atype: '5001',
          bid: undefined,
          aid: undefined,
          ptype: undefined,
          weight: undefined
        },
        rule: {
          bid: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          aid: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ],
          ptype: [
            {
              required: true,
              message: '请选择',
              trigger: 'blur'
            }
          ],
          weight: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        }
      },
      table: {
        data: [{
          date: '2016-05-02'
        }, {
          date: '2016-05-04'
        }]
      },
      temp: {
        msg: undefined,
        newHash: undefined,
        newQr: undefined
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post('/api/ent/process/add', null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            bid: this.form.data.bid,
            aid: this.form.data.aid,
            ptype: this.form.data.ptype,
            weight: this.form.data.weight
          }
        }).then(function (r) {
          if (r.data.success) {
            this.temp.msg = r.data.msg

            const hash = this.hashids.encode(1, r.data.detail.pid)
            this.temp.newHash = hash

            QRCode.toDataURL(`${location.origin}/#/trace/${hash}`, { errorCorrectionLevel: 'H' }).then(function (url) {
              this.temp.newQr = url
            }.bind(this))

            this.dialog = true
          } else {
            this.$alert(r.data.msg)
          }
        }.bind(this))
      })
    },
    toggleColl (cid) {
      this.collapse[cid].opened = !this.collapse[cid].opened
      this.tryLoadData(cid)
    },
    tryLoadData (cid) {
      if (this.collapse[cid].opened) {
        if (!this.collapse[cid].loaded && !this.collapse[cid].loading) {
          this.collapse[cid].loading = true
          this.axios.get('/api/ent/process/list', {
            headers: {
              token: this.$store.state.ent.token
            }
          }).then(function (r) {
            this.table.data = r.data.detail
            this.genQR()
          }.bind(this)).finally(function () {
            this.collapse[cid].loaded = true
            this.collapse[cid].loading = false
          }.bind(this))
        }
      }
    },
    genQR () {
      this.table.data.forEach(function (e, i) {
        const hash = this.hashids.encode(1, e.pid)
        this.table.data[i].hash = hash

        QRCode.toDataURL(`${location.origin}/#/trace/${hash}`, { errorCorrectionLevel: 'H' }).then(function (url) {
          this.table.data[i].qr = url
        }.bind(this))
      }.bind(this))
    }
  }
}
</script>
